<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>区域生成的访问器有六个</li>
		<li>x()、x0()、x1()、y()、y0()、y1()</li>
		<li>也有与线段生成器类似的方法：interpolate() tension() defined()</li>
	</ul>
		<div class="area">
			
		</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".area").append('svg').attr({"width":width,"height":height});
		var dataset = [80,120,130,70,60,90];
		var areaPath = d3.svg.area()
									.x(function(d,i) {
										return 50 + i * 80;
									})
									.y0(function(d,i) {
										return height / 2;
									})
									.y1(function(d,i) {
										return height / 2 - d;
									})
									.interpolate("basis")
		svg.append("path").attr("d",areaPath(dataset))
				.attr("stroke","skyblue")
				.attr("stroke-width","3px")
				.attr("fill","yellow")
	</script>
</body>
</html>